import { HashRouter, Link, NavLink } from "react-router-dom";
import RouterView from "./router/index";
import routes from "./router/routes";
import styled from "styled-components";

/**
 * react-router-dom v6中，移除了
 * Switch
 * Redirect
 * withRouter 代替方案：自己写

/**
 * HashRouter 是 React Router 提供的用于处理哈希路由的组件
 * Link 是 React Router 提供的用于创建链接的组件
 * Route 是 React Router 提供的用于定义路由的组件
 * Switch 是 React Router 提供的用于匹配路由的组件
 * Redirect 是 React Router 提供的用于重定向的组件
 */

/**
 * 路由匹配规则
 * 路由地址：Route中path的值
 * 页面地址：浏览器URL后面的hash值
 * 
 * 页面地址    路由地址   非精准匹配    精准匹配
 * /           /          true        true
 * /           /login     true        false
 * /login      /          true        false
 * /a/b        /a         true        false
 * /a/b        /a/b       true        true
 * /a2/b       /a         false       false
 * /和/xxx算是地址中的一个整体
 * 非精准匹配：
 * @1 页面地址和路由地址完全一致 true
 * @2 页面地址中，包含一整套完整的路由地址 true
 * @3 剩下都是false
 * 
 * 精准匹配：
 * @1 页面地址和路由地址完全一致
 */

// useHistory 返回一个history对象，可以用来跳转页面
// useLocation 返回一个location对象，可以用来获取当前页面的路径
// useRouteMatch 返回一个match对象，可以用来获取当前页面的路径

const NavWrapper = styled.nav`
	background: #333;
	padding: 1rem;
	text-align: center;
	
	a {
		color: white;
		text-decoration: none;
		margin: 0 1rem;
		padding: 0.5rem 1rem;
		border-radius: 4px;
		
		&:hover {
			background: red;
		}

		&.active {
			background: red;
		}
	}
`;

const MainContainer = styled.main`
	max-width: 1200px;
	margin: 2rem auto;
	padding: 0 1rem;
`;

const Router = () => {
	return (
		<HashRouter>
			<NavWrapper>
				<NavLink to="/a">A</NavLink>
				<NavLink to="/b">B</NavLink>
				<NavLink to="/c">C</NavLink>
				{/* <Link to="/a">A</Link>
				<Link to="/b">B</Link>
				<Link to="/c">C</Link> */}
			</NavWrapper>
			<MainContainer>
				<RouterView routes={routes} />
				{/* <Switch>
					<Route path="/a" component={A} />
					<Route path="/b" component={B} />
					<Route path="/c" component={C} />
					<Route path="*" component={NotFound} />
					<Redirect from="/" to="/a" exact />
				</Switch> */}
			</MainContainer>
		</HashRouter>
	)
}

export default Router